<template>
  <div>
    <button @click="isShow = !isShow">切换</button>
    <transition
      name="fade"
      enter-active-class="animate__animated animate__rotateIn"
      leave-active-class="animate__animated animate__rotateOut"
    >
      <!-- transision 会根据给出的name自动王内部dom在对应的时间切换对应class -->
      <div v-if="isShow" class="box" />
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  height: 400px;
  background: pink;
  opacity: 1;
}
</style>
